<template>
  <el-dialog :title="info.title" :visible.sync="info.isShow" @opened="opened">
    <el-form :model="form">
    <el-form-item label="一级分类" :label-width="formLabelWidth">
        <el-select v-model="form.first_cateid" @change="changeCate">
          <el-option label="--请选择--" value></el-option>
          <!-- 遍历一级分类列表 -->
          <el-option v-for="item in cates" :key="item.id" :label="item.catename" :value="item.id"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="二级分类" :label-width="formLabelWidth">
        <el-select v-model="form.second_cateid">
          <el-option label="--请选择--" value></el-option>
          <!-- 遍历二级分类列表 -->
          <el-option v-for="item in second_cate" :key="item.id" :label="item.catename" :value="item.id"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="商品名称" :label-width="formLabelWidth">
        <el-input v-model="form.goodsname" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="价格" :label-width="formLabelWidth">
        <el-input v-model="form.price" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="市场价格" :label-width="formLabelWidth">
        <el-input v-model="form.market_price" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :on-change="changeImg"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-form-item>
    <el-form-item label="商品规格" :label-width="formLabelWidth">
        <el-select v-model="form.specsid" @change="changeSpecs">
          <el-option label="--请选择--" value></el-option>
          <!-- 遍历商品规格列表 -->
          <el-option v-for="item in specs" :key="item.id" :label="item.specsname" :value="item.id"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="规格属性" :label-width="formLabelWidth">
        <el-select v-model="form.specsattr" multiple>
          <el-option label="--请选择--" value></el-option>
          <!-- 遍历规格属性列表 -->
          <el-option v-for="item in second_specs" :key="item" :label="item" :value="item"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="是否新品" :label-width="formLabelWidth">
        <el-radio v-model="form.isnew" :label="1">是</el-radio>
        <el-radio v-model="form.isnew" :label="2">否</el-radio>
    </el-form-item>
    <el-form-item label="是否热卖" :label-width="formLabelWidth">
        <el-radio v-model="form.ishot" :label="1">是</el-radio>
        <el-radio v-model="form.ishot" :label="2">否</el-radio>
    </el-form-item>
    <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch v-model="form.status" active-color="green" inactive-color="grey" :active-value="1" :inactive-value="2"></el-switch>
    </el-form-item>
    <el-form-item label="商品描述" :label-width="formLabelWidth">
        <div id="div1"></div>
    </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button v-if="info.isAdd" type="primary" @click="confirm">确 定</el-button>
      <el-button v-else type="primary" @click="edit">修 改</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {mapActions,mapGetters} from 'vuex'
import E from 'wangeditor'
import { goodsAdd } from '../../../request/api'
import { successAlert,errorAlert } from '../../../utils/alert'
export default {
    data(){
        return {
            formLabelWidth:'120px',
        }
    },
    computed:{
        ...mapGetters({
            "info":"goods/info",
            "form":"goods/form",
            "editor":"goods/editor",
            "imageUrl":"goods/imageUrl",
            "second_cate":"goods/second_cate",
            "second_specs":"goods/second_specs",
            "cates":"cate/tableData",
            "specs":"specs/tableData",
        }),
    },
    methods:{
        ...mapActions({
            "requestCate":"cate/CateListActions",
            "requestSpecs":"specs/specsListActions",
            "requestForm":"goods/formActions",
            "requestImgUrl":"goods/imgUrlActions",
            "requestEditor":"goods/editorActions",
            "requestGoodsList":"goods/goodsListActions",
            "requestGoodsCount":"goods/goodsCountActions",
            "requestCates":"goods/cateAction",
            "requestSpecss":"goods/specsAction",
            "requestGoodsEdit":"goods/goodsEditsAction"
        }),
        opened(){
            if(!this.editor){
                this.requestEditor(new E('#div1'))
                this.editor.create()
            };
            if(this.form.description){
                this.editor.txt.html(this.form.description)
            }
            if(this.form.first_cateid){
                this.requestCates('')
                let index =  this.cates.findIndex(item=>item.id===this.form.first_cateid);
                this.requestCates(this.cates[index].children)
            }
            if(this.form.specsid){
                this.requestSpecss('')
                let index = this.specs.findIndex(item=>item.id===this.form.specsid);
                this.requestSpecss(this.specs[index].attrs)
            }
        },
        changeImg(file){
            if(file.size  > 2*1024*1024){
                errorAlert('文件大小不能超过2M!!!');
                return;
            }
            let ext = ['.png','.jpeg','.jpg','.gif','.webp'];
            let extName = file.name.slice(file.name.lastIndexOf('.'));
            if(!ext.some(item=>item===extName)){
                errorAlert('文件格式不正确,请重新上传');
                return;
            }
            this.requestImgUrl(URL.createObjectURL(file.raw));
            this.form.img  = file.raw;
        },
        changeCate(){
            this.form.second_cateid = '';  
            let index =  this.cates.findIndex(item=>item.id===this.form.first_cateid);
            this.requestCates(this.cates[index].children)
        },
        changeSpecs(){
            this.form.specsattr = [];
            let index = this.specs.findIndex(item=>item.id===this.form.specsid);
            this.requestSpecss(this.specs[index].attrs)
        },
        cancel(){
            this.info.isShow = false;
            this.info.title = '';
            this.info.isAdd = true;
            this.requestForm({first_cateid:'',second_cateid:'',goodsname:'',price:'',market_price:'',img:'',description:'',specsid:'',specsattr:'',isnew:1,ishot:1,status:1,});
            this.requestCates('')
            this.requestSpecss('')
            this.requestImgUrl('')
            this.editor.txt.html(this.form.description)
        },
        confirm(){
            this.form.description = this.editor.txt.html()
            goodsAdd(this.form).then(res=>{
                if(res.code===200){
                    successAlert(res.msg)
                    this.cancel()
                    this.requestGoodsList()
                    this.requestGoodsCount()
                }
            })
        },
        edit(){
            this.form.description = this.editor.txt.html()
            this.requestGoodsEdit(this.form)
            this.cancel()
            this.requestGoodsList()
            this.requestGoodsCount()
        },
    },
    mounted(){
        this.requestCate()
        this.requestSpecs()
    },
}
</script>

<style scoped>
.avatar-uploader >>> .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader  >>> .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>